<template>
  <el-drawer
    v-model="drawer"
    :with-header="false"
    :lock-scroll="true"
    :size="300"
  >
    <div class="slide-menu">
      <div @click="toOther('/recomm')">推荐</div>
      <el-divider />
      <div @click="toOther('/recomm')">关注</div>
      <el-divider />
      <div @click="toOther('/recomm')">热播</div>
      <el-divider />
      <div @click="toOther('/recomm')">分类</div>
      <el-divider />
      <div @click="toOther('/center')">个人中心</div>
    </div>
  </el-drawer>
</template>

<script setup>
import { ref, defineExpose } from "vue";
import { useRouter } from "vue-router";

const drawer = ref(false);
const router = useRouter();

const open = () => {
  drawer.value = true;
};

const toOther = (path) => {
  drawer.value = false;
  router.push(path);
};

defineExpose({
  open,
});
</script>

<style scoped lang="scss">
.slide-menu {
  text-align: center;
}
</style>
